<template>
    <div>
        <Tabs type="card" closable v-model="value"  @on-tab-remove="handleTabRemove">
            <TabPane  label="主页" :closable="false" :value="value" name="index">
                <ManagerIndex id="index"></ManagerIndex>
            </TabPane>
            <!--<TabPane  label="测试" :closable="false" value="ceshi" name="ceshi">
                <component :is="myCom"></component>
            </TabPane>-->
            <!--<TabPane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
                <iframe frameborder="0" width="100%"  marginheight="0" scrolling="auto" marginwidth="0" :src="tab.url"  :height="orderHight" >

                </iframe>
            </TabPane>-->
            <TabPane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
                <component :is="tab.name"></component>
            </TabPane>
            <!--<Button @click="handleTabsAdd({label:'权限管理',name:'id3'})" size="small" slot="extra">增加</Button>-->
        </Tabs>
    </div>

</template>

<script>
    import Vue from 'vue'
    import ManagerIndex from '@/views/manage/index/Index.vue'

    export default {
        components:{
            ManagerIndex
        },
        data () {
            let menus=[  ];

            //控制高度
            var orderHight =document.body.clientHeight-140;
            return {
                tabs: menus,
                value:'index',
                orderHight,
                myCom:''
            }
        },
        created(){
            window.onresize = ()=>{
                this.orderHight=document.body.clientHeight-140;
            };
        },
        methods: {
            handleTabsAdd (curTab) {
                for(let i=0 ;i<this.tabs.length;i++){
                    let tab=this.tabs[i];
                    if(tab.name==curTab.name){
                        this.value=curTab.name;
                        return;
                    }
                }
                let MenuCom= () =>import('../../'+curTab.url);
                Vue.component(curTab.name,MenuCom);

                this.tabs.push(curTab);
                this.value=curTab.name;




            },
            handleTabRemove(name){
                for(let i=0 ;i<this.tabs.length;i++){
                    let tab=this.tabs[i];
                    if(tab.name==name){
                        this.tabs.splice(i,1);
                        break;
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .ivu-tabs {
        overflow: visible;
    }
</style>
